<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="documentation">
        <meta name="product" content="kendo-ui">
        
        <title>Getting Started with Kendo UI | Kendo UI Getting Started</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Host Kendo UI in your project, download the Bower packages, or install it by using the CDN services.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("intro/installation/getting-started.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//intro/installation/getting-started.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    

    <div id="page-article">
        <article>
            
             <h1 id="getting-started-with-progress-kendo-ui">
<a href="#getting-started-with-progress-kendo-ui">Getting Started with Progress</a><sup>®</sup> Kendo UI<sup>®</sup>
</h1>

<p>Depending on your preferences and the requirements of your project, you can:</p>

<ul>
<li>Download <a href="http://www.telerik.com/download/kendo-ui">Kendo UI for a Trial Period</a>.</li>
<li>Get your <a href="http://www.telerik.com/purchase/kendo-ui">Commercial License for Kendo UI Professional</a>.</li>
<li>Get your <a href="http://www.telerik.com/purchase/aspnet-mvc">Commercial License for Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET MVC</a>.</li>
<li>Get your <a href="http://www.telerik.com/purchase/jsp-ui">Commercial License for Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET JSP</a>.</li>
<li>Get your <a href="http://www.telerik.com/purchase/php-ui">Commercial License for Progress<sup>®</sup> Telerik<sup>®</sup> UI for ASP.NET PHP</a>.</li>
<li>Use the <a href="https://github.com/telerik/kendo-ui-core">GitHub Open-Source License for Kendo UI Core</a>.</li>
</ul>

<h2 id="hosting-kendo-ui-in-your-project"><a href="#hosting-kendo-ui-in-your-project">Hosting Kendo UI in Your Project</a></h2>

<p>To host Kendo UI in your project, you need to:</p>

<ul>
<li>
<a href="#download">Download the bundles</a>.</li>
<li>
<a href="#add-css-and-javascript-references">Add the CSS and JavaScript references</a>.</li>
</ul>

<h3 id="download-the-bundles"><a href="#download-the-bundles">Download the Bundles</a></h3>

<p>After you <a href="http://www.telerik.com/download/kendo-ui">download any of the Kendo UI bundles</a>, the folders listed below are hosted in your local repository.</p>

<table>
<thead>
<tr>
<th align="left">FOLDERS</th>
<th align="left">CONTENTS</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>/apptemplates</code></td>
<td align="left">The folder contains standalone starter templates. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all Ajax data requests.</td>
</tr>
<tr>
<td align="left"><code>/examples</code></td>
<td align="left">Accommodates the quick-start demo files. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all Ajax data requests.</td>
</tr>
<tr>
<td align="left"><code>/js</code></td>
<td align="left">Contains the minified JavaScript files.</td>
</tr>
<tr>
<td align="left"><code>/src</code></td>
<td align="left">This folder used to hold the source code files, but they are now provided in a separate download package. Access the source code package from the <a href="https://www.telerik.com/account/my-downloads">Downloads section</a> of your account. Note that the source code is <em>not</em> available to trial users.</td>
</tr>
<tr>
<td align="left"><code>/styles</code></td>
<td align="left">Consists of the minified CSS files and theme images. The folder also includes the Less files, which can be passed to the compiler, located on the first-level folders inside <code>styles/folder: styles/web/</code> and <code>styles/mobile/</code>. Note that the Less files are <em>not</em> available in the trial version.</td>
</tr>
<tr>
<td align="left"><code>/wrappers</code></td>
<td align="left">Includes the server-side wrappers. As it is necessary for the UI for ASP.NET MVC, UI for JSP or UI for PHP distributions only, the folder is available in the commercial packages of these versions.</td>
</tr>
<tr>
<td align="left"><code>changelog.html</code></td>
<td align="left">Provides the Kendo UI release notes.</td>
</tr>
</tbody>
</table>

<h3 id="add-css-and-javascript-references"><a href="#add-css-and-javascript-references">Add CSS and JavaScript References</a></h3>

<p>To use Kendo UI in your project, include the required JavaScript and CSS files.</p>

<p><strong>Step 1</strong> Extract the <code>/js</code> and <code>/styles</code> directories from the bundle archive and copy them to your web application root directory.  </p>

<p><strong>Step 2</strong> Include the Kendo UI JavaScript and CSS files in the <code>head</code> tag of your HTML document. Verify that the common CSS file is registered before the theme CSS file.</p>

<h6>Example</h6>

<pre><code>    &lt;!DOCTYPE html&gt;
        &lt;html&gt;
        &lt;head&gt;
            &lt;title&gt;Welcome to Kendo UI!&lt;/title&gt;
            &lt;!-- Common Kendo UI CSS for web widgets and widgets for data visualization. --&gt;
            &lt;link href="styles/kendo.common.min.css" rel="stylesheet" /&gt;

            &lt;!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. --&gt;
            &lt;link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" /&gt;

            &lt;!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. --&gt;
            &lt;link href="styles/kendo.default.min.css" rel="stylesheet" /&gt;

            &lt;!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. --&gt;
            &lt;link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" /&gt;

            &lt;!-- jQuery JavaScript --&gt;
            &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;

            &lt;!-- Kendo UI combined JavaScript --&gt;
            &lt;script src="js/kendo.all.min.js"&gt;&lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
            Hello World!
        &lt;/body&gt;
        &lt;/html&gt;
</code></pre>

<blockquote>
<p><strong>Important</strong>  </p>

<p>The code examples onwards assume that the Kendo UI scripts and stylesheets are now added to the document.</p>
</blockquote>

<p><strong>Step 3</strong> Initialize a Widget.</p>

<p>The following example demonstrates how to initialize the <a href="http://demos.telerik.com/kendo-ui/datepicker/index">DatePicker widget</a>.</p>

<h6>Example</h6>

<pre><code>    &lt;!-- HTML element from which the DatePicker would be initialized --&gt;
    &lt;input id="datepicker" /&gt;
    &lt;script&gt;
    $(function() {
        // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
        $("#datepicker").kendoDatePicker();
    });
    &lt;/script&gt;
</code></pre>

<p>The following example demonstrates the full initialization of the <a href="http://demos.telerik.com/kendo-ui/datepicker/index">DatePicker widget</a>.</p>

<h6>Example</h6>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Welcome to Kendo UI!&lt;/title&gt;
        &lt;link href="styles/kendo.common.min.css" rel="stylesheet" /&gt;
        &lt;link href="styles/kendo.default.min.css" rel="stylesheet" /&gt;
        &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="js/kendo.all.min.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;input id="datepicker" /&gt;
        &lt;script&gt;
            $(function() {
                $("#datepicker").kendoDatePicker();
            });
        &lt;/script&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h2 id="installing-bower-packages"><a href="#installing-bower-packages">Installing Bower Packages</a></h2>

<p><a href="https://bower.io/">Bower</a> is a popular package manager for the web that handles frameworks, libraries, assets, and utilities.</p>

<h3 id="overview"><a href="#overview">Overview</a></h3>

<p>Kendo UI maintains 2 Bower packages:</p>

<ul>
<li>Kendo UI Core.</li>
<li>Kendo UI Professional.</li>
</ul>

<p>All official releases, service packs, and internal builds are uploaded to both of them. For more information, refer to the article on <a href="/intro/installation/bower-install">installing the Kendo UI Bower packages</a>.</p>

<h3 id="delimiter-for-recurrence-exceptions"><a href="#delimiter-for-recurrence-exceptions">Delimiter for Recurrence Exceptions</a></h3>

<p>As of the Kendo UI 2016 Q2 (2016.2.504) release:</p>

<ul>
<li>The Scheduler substitutes the semicolon (<code>;</code>) as the delimiter type for recurrence exception with the comma (<code>,</code>).</li>
<li>The Scheduler no longer adds a trailing delimiter to a recurrence exception.</li>
</ul>

<p>The change was driven by the <a href="http://tools.ietf.org/html/rfc5545#page-120">RFC 5545</a> specification. Note that the previously demonstrated behavior had been incorrect.</p>

<h2 id="using-cdn-services"><a href="#using-cdn-services">Using CDN Services</a></h2>

<p>Kendo UI CDN is hosted on <a href="https://aws.amazon.com/cloudfront/">Amazon CloudFront</a>. To access the CDN Service, you can use different approaches. For more information, refer to the article on <a href="/intro/installation/cdn-service">installing the Kendo UI CDN Service</a>.</p>

<h2 id="including-only-what-you-need"><a href="#including-only-what-you-need">Including Only What You Need</a></h2>

<p>Add to your project only what it requires by picking the right combined scripts, building a custom combined script, or using Gulp to build a custom script. For more information, refer to the article on <a href="/intro/installation/what-you-need">customizing the scripts you need</a>.</p>

<h2 id="see-also"><a href="#see-also">See Also</a></h2>

<p>Other articles on getting started with Kendo UI:</p>

<ul>
<li><a href="/intro/installation/cdn-service">Kendo UI CDN Services</a></li>
<li><a href="/intro/installation/what-you-need">Include Only What You Need</a></li>
<li><a href="/intro/installation/prerequisites">JavaScript Prerequisites</a></li>
<li><a href="/intro/installation/jquery-initialization">Initialize Widgets Using jQuery Plug-Ins</a></li>
<li><a href="/intro/installation/markup">Initialize Widgets Using Markup</a></li>
<li><a href="/intro/widget-basics/wrapper-element">Access Widget DOM Elements: wrapper and element</a></li>
<li><a href="/intro/widget-basics/data-attribute-initialization">Set Data Attributes</a></li>
<li><a href="/intro/widget-basics/events-and-methods">Widget Methods and Events</a></li>
<li><a href="/intro/widget-basics/destroy">Destroy Widgets</a></li>
<li><a href="/intro/widget-basics/editing">Edit Widgets</a></li>
<li><a href="/intro/widget-basics/create-custom-kendo-widget">Create Custom Widgets</a></li>
<li><a href="/intro/installation/bower-install">Bower Packages</a></li>
<li><a href="/intro/installation/nuget-install">NuGet Packages</a></li>
</ul> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

